<template>
  <div class="main-wrapper task-create-container">
    <el-row>
      <el-col :span="3" class="left-steps">
        <el-steps direction="vertical" :active="active">
          <el-step title="作业信息" icon="el-icon-edit-outline"></el-step>
          <el-step title="场景配置" icon="el-icon-s-claim"></el-step>
          <el-step title="度量指标" icon="el-icon-s-promotion"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="21" class="right-content">
        <div class="step-1" v-if="active === 1">
          <FirstStep @nextStep="nextStep"/>
        </div>
        <div class="step-2" v-if="active === 2">
          <SecondStep @nextStep="nextStep" @previousStep="previousStep"/>
        </div>
        <div class="step-3" v-if="active === 3">
          <ThirdStep @previousStep="previousStep" @submit="submit" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {v4 as uuid} from "uuid"
import FirstStep from './components/FirstStep.vue'
import SecondStep from './components/SecondStep.vue'
import ThirdStep from "./components/ThirdStep.vue"
import {createSession, createTask} from '@/api/task'
import { mapGetters, mapState } from 'vuex'
import {timer} from '@/utils/format'
  export default {
    components: {
      FirstStep,
      SecondStep,
      ThirdStep
    },
    data(){
      return {
        active: 1
      }
    },
    computed: {
      ...mapGetters(['createCaseForms']),
      ...mapState({
        selectedMetricCategory: state => state.case.selectedMetricCategory,
        caseGroupIds: state => state.case.caseGroupIds,
        caseCategoryIds: state => state.case.caseCategoryIds,
        caseIds: state => state.case.caseIds,
    }),
      
    },
    mounted(){
      this.active = 1
      this.resetField()
    },
    methods:{
      // 下一步
      nextStep(){
        this.active = this.active < 3 ? this.active +1 : 1
      },
      // 上一步
      previousStep(){
        this.active = this.active > 1 ? this.active -1 : 3
      },
      // 提交
      submit(){
        const createSessionParams = {
          session_name: this.createCaseForms.session_name,
          session_id: this.createCaseForms.session_id,
        }
        // 提交的字段汇总
        const submitParams = Object.assign(this.createCaseForms, {
          metric_category: this.selectedMetricCategory,
          case_category_ids: this.caseCategoryIds,
          case_group_ids: this.caseGroupIds,
          case_ids: this.caseIds})
        // 创建session
        createSession(createSessionParams).then(res => {
            // 创建task 
            createTask(submitParams).then(res => {
              this.$message.success('创建任务成功！')
            })
          setTimeout(() => {
            this.resetField()
            // 创建成功后跳转到任务管理页
            this.$router.push({path:'/task/task-run'})
          },1000)    
        })
      },
      // 离开当前页面时，将存入store中的创建作业的form数据清空、重置。
      resetField(){
        const clearForm = {
          session_name: 'Task_' + timer(),
          session_id: uuid(),
          map_id:'Town04',
          controller:'sim_control',
          pnc_version: '',
          sim_type: 'worldsim',
          ext_workers: false,  // 是否使用自定义节点
          ext_workers_id: '',
          case_ids:[],           // 勾选的 case id 
          case_group_ids: [],  // 选择case的 内置组 ids
          case_category_ids: [], // 选择case的自定义组 ids
          metric_category: [],   // 选择metric
          scene_mode: null
          // metric_sub_category: ''  // 选择metric 的第2级
      }
      this.$store.dispatch('case/setCaseForms', clearForm);
      this.$store.dispatch('case/setSelectedCaseIds', [])
      this.$store.dispatch('case/setSelectedCaseGroupIds', [])
      this.$store.dispatch('case/setSelectedCaseCategoryIds', [])
      this.$store.dispatch('case/setSelectedMetricCategory', [])
      }
    }
  }
</script>
<style lang="scss" scoped>
@import '@/styles/vars.scss' ;
.task-create-container{
  padding: 0 22px;
}
.left-steps{ 
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  height: calc(100vh - 40px - $header-height);
  .el-steps{
    height: 200px;
    margin-top: 20px;
    ::v-deep .el-step__title.is-process{
      color: #333;
      font-weight: 500;
    }
    ::v-deep .el-step__icon-inner{
      font-size: 22px;
    }
  }
}
</style>